<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>快速MBTI测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主紫色
                        secondary: '#FD79A8', // 辅助粉色
                        mbti: {
                            e: '#4299E1', // 外向
                            i: '#3182CE', // 内向
                            s: '#38B2AC', // 感觉
                            n: '#319795', // 直觉
                            t: '#ED8936', // 思考
                            f: '#E57373', // 情感
                            j: '#805AD5', // 判断
                            p: '#6B46C1'  // 知觉
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .mbti-bg {
                background-image: linear-gradient(135deg, rgba(108, 92, 231, 0.03) 0%, rgba(253, 121, 168, 0.03) 100%);
            }
            .scale-hover {
                transition: transform 0.2s ease;
            }
            .scale-hover:hover {
                transform: scale(1.02);
            }
            .slide-in {
                animation: slideIn 0.3s ease-out;
            }
            @keyframes slideIn {
                from { transform: translateX(20px); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">


    <!-- 主内容区 -->
    <main class="flex-1 pt-5 pb-24 px-4 relative">
        <!-- 全局背景渐变 -->
        <div class="fixed inset-0 w-full h-full" style="background: linear-gradient(135deg, #FDCFE8 0%, #E4C1F9 50%, #BDE0FE 100%); z-index: -1;"></div>
        
        <div class="container mx-auto max-w-md relative z-10">
            <!-- 测试介绍页 -->
            <div id="test-intro" class="mb-6">
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-6 border border-white/50">
                    <div class="text-center mb-6">
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center mx-auto mb-4 shadow-md">
                            <i class="fa fa-bolt text-primary text-2xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-800 mb-2">快速MBTI测试</h2>
                        <p class="text-sm text-gray-500">48题 · 10分钟 · 基础解析</p>
                    </div>
                    
                    <div class="space-y-4 mb-6">
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fa fa-check text-primary text-xs"></i>
                            </div>
                            <p class="text-sm text-gray-600">
                                通过48道题快速了解你的MBTI人格类型，探索你的性格偏好和独特之处。
                            </p>
                        </div>
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fa fa-heart text-primary text-xs"></i>
                            </div>
                            <p class="text-sm text-gray-600">
                                答案没有对错之分，请根据你的真实感受选择最符合的选项。
                            </p>
                        </div>
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fa fa-clock-o text-primary text-xs"></i>
                            </div>
                            <p class="text-sm text-gray-600">
                                预计用时10分钟，建议在安静环境中完成。
                            </p>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-4 gap-2 mb-6">
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-e/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-e">E</span>
                            </div>
                            <span class="text-gray-600">外向</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-i/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-i">I</span>
                            </div>
                            <span class="text-gray-600">内向</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-s/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-s">S</span>
                            </div>
                            <span class="text-gray-600">感觉</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-n/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-n">N</span>
                            </div>
                            <span class="text-gray-600">直觉</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-t/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-t">T</span>
                            </div>
                            <span class="text-gray-600">思考</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-f/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-f">F</span>
                            </div>
                            <span class="text-gray-600">情感</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-j/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-j">J</span>
                            </div>
                            <span class="text-gray-600">判断</span>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center text-xs border border-white/50">
                            <div class="w-8 h-8 mx-auto mb-1 rounded-full bg-mbti-p/20 flex items-center justify-center">
                                <span class="font-bold text-mbti-p">P</span>
                            </div>
                            <span class="text-gray-600">知觉</span>
                        </div>
                    </div>
                    
                    <button id="start-test" class="w-full bg-gradient-to-r from-primary to-secondary text-white py-3 rounded-xl text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-300">
                        <i class="fa fa-play mr-2"></i>开始测试
                    </button>
                </div>
                
                <!-- 测试特点 -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <h3 class="text-sm font-medium mb-3 flex items-center">
                        <i class="fa fa-star text-primary mr-2"></i>测试特点
                    </h3>
                    <div class="space-y-3">
                        <div class="bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg p-3 border border-primary/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-bolt text-primary text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">快速便捷</span>
                            </div>
                            <p class="text-xs text-gray-600">仅48道题，10分钟快速完成</p>
                        </div>
                        <div class="bg-gradient-to-r from-secondary/5 to-secondary/10 rounded-lg p-3 border border-secondary/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-chart-bar text-secondary text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">8维分析</span>
                            </div>
                            <p class="text-xs text-gray-600">全面分析8个核心人格维度</p>
                        </div>
                        <div class="bg-gradient-to-r from-accent/5 to-accent/10 rounded-lg p-3 border border-accent/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-lightbulb-o text-accent text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">入门首选</span>
                            </div>
                            <p class="text-xs text-gray-600">适合初次了解MBTI的用户</p>
                        </div>
                        <div class="bg-gradient-to-r from-green-500/5 to-green-500/10 rounded-lg p-3 border border-green-500/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-heart text-green-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">实用建议</span>
                            </div>
                            <p class="text-xs text-gray-600">提供职业发展和人际关系指导</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 测试题目区（默认隐藏） -->
            <div id="test-questions" class="hidden">
                <!-- 进度条 -->
                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex justify-between text-sm mb-2">
                        <span>问题 <span id="current-question">1</span>/48</span>
                        <span id="progress-percent">2%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-primary h-2 rounded-full" style="width: 2%"></div>
                    </div>
                </div>
                
                <!-- 题目容器 -->
                <div id="question-container" class="bg-white rounded-xl shadow-sm p-5 mb-6 mbti-bg">
                    <div class="flex items-center mb-4">
                        <div id="dimension-indicator" class="w-8 h-8 rounded-full bg-mbti-e/10 flex items-center justify-center mr-3">
                            <span class="font-bold text-mbti-e text-sm">E/I</span>
                        </div>
                        <h3 id="question-text" class="text-base font-medium">
                            参加社交活动后，你通常会感到：
                        </h3>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="question-option scale-hover" data-value="E">
                            <div class="p-4 bg-white rounded-lg border border-gray-200 hover:border-mbti-e cursor-pointer">
                                <div class="flex justify-between items-center">
                                    <span>精力充沛，获得了新的能量</span>
                                    <span class="px-2 py-1 bg-mbti-e/10 text-mbti-e rounded text-xs font-medium">E</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="question-option scale-hover" data-value="I">
                            <div class="p-4 bg-white rounded-lg border border-gray-200 hover:border-mbti-i cursor-pointer">
                                <div class="flex justify-between items-center">
                                    <span>需要休息，感到精力消耗</span>
                                    <span class="px-2 py-1 bg-mbti-i/10 text-mbti-i rounded text-xs font-medium">I</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 导航按钮 -->
                <div class="flex justify-between">
                    <button id="prev-question" class="w-20 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        上一题
                    </button>
                    <button id="next-question" class="w-20 bg-primary text-white py-2.5 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                        下一题
                    </button>
                </div>
            </div>
            
            <!-- 测试结果区（默认隐藏） -->
            <div id="test-result" class="hidden space-y-6">
                <!-- 结果概览 -->
                <div class="bg-white rounded-xl shadow-sm p-5 mbti-bg">
                    <div class="text-center mb-6">
                        <div id="mbti-type-badge" class="inline-flex items-center justify-center px-4 py-1.5 rounded-full mb-3 text-white font-bold text-lg bg-primary">
                            INFP
                        </div>
                        <h2 class="text-xl font-bold text-primary mb-1" id="mbti-type-name">调停者</h2>
                        <p class="text-sm text-gray-500" id="mbti-type-description">理想主义者，富有洞察力和同情心</p>
                    </div>
                    
                    <!-- 维度雷达图 -->
                    <div class="mb-6">
                        <h3 class="text-sm font-medium mb-3 text-center">你的MBTI维度分布</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-white rounded-lg p-3">
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-mbti-i">内向(I)</span>
                                    <span class="text-mbti-e">外向(E)</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2 mb-1">
                                    <div class="bg-mbti-i h-2 rounded-full" style="width: 70%"></div>
                                </div>
                                <div class="text-right text-xs text-gray-500">70%</div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-3">
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-mbti-s">感觉(S)</span>
                                    <span class="text-mbti-n">直觉(N)</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2 mb-1">
                                    <div class="bg-mbti-n h-2 rounded-full" style="width: 65%"></div>
                                </div>
                                <div class="text-right text-xs text-gray-500">65%</div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-3">
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-mbti-t">思考(T)</span>
                                    <span class="text-mbti-f">情感(F)</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2 mb-1">
                                    <div class="bg-mbti-f h-2 rounded-full" style="width: 80%"></div>
                                </div>
                                <div class="text-right text-xs text-gray-500">80%</div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-3">
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-mbti-j">判断(J)</span>
                                    <span class="text-mbti-p">知觉(P)</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2 mb-1">
                                    <div class="bg-mbti-p h-2 rounded-full" style="width: 75%"></div>
                                </div>
                                <div class="text-right text-xs text-gray-500">75%</div>
                            </div>
                        </div>
                    </div>
                    
                    <button id="retake-test" class="w-full bg-primary/10 text-primary py-2.5 rounded-lg text-sm font-medium hover:bg-primary/20 transition-colors">
                        <i class="fa fa-refresh mr-1"></i> 重新测试
                    </button>
                </div>
                
                <!-- 详细解析 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="text-base font-semibold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>MBTI类型解析
                    </h3>
                    
                    <div class="space-y-5 text-sm">
                        <div>
                            <h4 class="font-medium text-primary mb-2">类型概述</h4>
                            <p class="text-gray-600" id="type-overview">
                                INFP类型的人是理想主义者，富有创造力和洞察力。他们重视个人价值和意义，对他人富有同情心和理解力。虽然外表可能显得安静，但内心世界丰富而复杂。他们倾向于追求自己的理想，为自己认为有意义的事业而努力。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">四个维度详解</h4>
                            
                            <div class="space-y-3">
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="flex items-center mb-1">
                                        <span class="w-6 h-6 rounded-full bg-mbti-i/10 flex items-center justify-center mr-2 text-mbti-i text-xs font-bold">I</span>
                                        <span class="font-medium">内向型</span>
                                    </div>
                                    <p class="text-gray-600 text-xs">
                                        你倾向于从内心世界获取能量，喜欢独处思考。你可能在社交场合中感到精力消耗，需要时间独处来恢复能量。你更关注自己的想法和感受，而不是外部环境。
                                    </p>
                                </div>
                                
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="flex items-center mb-1">
                                        <span class="w-6 h-6 rounded-full bg-mbti-n/10 flex items-center justify-center mr-2 text-mbti-n text-xs font-bold">N</span>
                                        <span class="font-medium">直觉型</span>
                                    </div>
                                    <p class="text-gray-600 text-xs">
                                        你更关注事物的可能性和潜在意义，而不是具体的事实和细节。你喜欢思考未来，对抽象概念和理论感兴趣，善于看到事物之间的联系和模式。
                                    </p>
                                </div>
                                
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="flex items-center mb-1">
                                        <span class="w-6 h-6 rounded-full bg-mbti-f/10 flex items-center justify-center mr-2 text-mbti-f text-xs font-bold">F</span>
                                        <span class="font-medium">情感型</span>
                                    </div>
                                    <p class="text-gray-600 text-xs">
                                        你做决定时更注重个人价值观和对他人的影响，而不是纯粹的逻辑分析。你富有同情心，善于理解他人的感受，重视和谐的人际关系。
                                    </p>
                                </div>
                                
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <div class="flex items-center mb-1">
                                        <span class="w-6 h-6 rounded-full bg-mbti-p/10 flex items-center justify-center mr-2 text-mbti-p text-xs font-bold">P</span>
                                        <span class="font-medium">知觉型</span>
                                    </div>
                                    <p class="text-gray-600 text-xs">
                                        你倾向于灵活和开放的生活方式，喜欢保持选项的开放性，而不是严格的计划。你适应能力强，善于应对变化，喜欢在做事过程中探索可能性。
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">适合的职业方向</h4>
                            <div class="flex flex-wrap gap-2 mb-2">
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">心理咨询师</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">作家</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">艺术家</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">教师</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">社会工作者</span>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">成长建议</h4>
                            <p class="text-gray-600 text-sm">
                                作为INFP，你可以尝试在坚持自己理想的同时，更加关注现实世界的需求。学会设定边界，避免过度投入他人的问题而忽视自己的需求。适当走出舒适区，尝试一些结构化的活动，这会帮助你更好地平衡直觉和现实。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 分享和保存按钮 -->
                <div class="flex gap-3">
                    <button class="flex-1 bg-secondary text-white py-2.5 rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors">
                        <i class="fa fa-share-alt mr-1"></i> 分享结果
                    </button>
                    <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                        <i class="fa fa-bookmark-o mr-1"></i> 保存结果
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 测试结果弹框 -->
    <div id="result-modal" class="fixed inset-0 bg-black/50 z-50 hidden">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 transform translate-y-full transition-transform duration-300 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-800">快速MBTI测试结果</h3>
                <button id="close-result-modal" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
                    <i class="fa fa-times text-gray-600"></i>
                </button>
            </div>
            
            <div id="result-content" class="space-y-6">
                <!-- 结果内容将通过JavaScript动态生成 -->
            </div>
            
            <div class="mt-6 flex space-x-3">
                <button id="retake-test" class="flex-1 py-3 border border-gray-300 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fa fa-refresh mr-2"></i>重新测试
                </button>
                <button id="back-to-home" class="flex-1 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all duration-300">
                    <i class="fa fa-home mr-2"></i>返回首页
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // MBTI测试题目数据
        const testQuestions = [
            {
                id: 1,
                dimension: "E/I",
                text: "参加社交活动后，你通常会感到：",
                options: [
                    { value: "E", text: "精力充沛，获得了新的能量", color: "mbti-e" },
                    { value: "I", text: "需要休息，感到精力消耗", color: "mbti-i" }
                ]
            },
            {
                id: 2,
                dimension: "S/N",
                text: "当你学习新事物时，你更关注：",
                options: [
                    { value: "S", text: "具体的事实和实际应用", color: "mbti-s" },
                    { value: "N", text: "抽象的概念和潜在可能性", color: "mbti-n" }
                ]
            },
            {
                id: 3,
                dimension: "T/F",
                text: "做重要决定时，你更倾向于：",
                options: [
                    { value: "T", text: "依靠逻辑分析，保持客观", color: "mbti-t" },
                    { value: "F", text: "考虑个人价值观和对他人的影响", color: "mbti-f" }
                ]
            },
            {
                id: 4,
                dimension: "J/P",
                text: "对于计划，你更偏好：",
                options: [
                    { value: "J", text: "提前制定详细计划并遵循", color: "mbti-j" },
                    { value: "P", text: "保持灵活，根据情况调整", color: "mbti-p" }
                ]
            },
            {
                id: 5,
                dimension: "E/I",
                text: "在团队中，你更倾向于：",
                options: [
                    { value: "E", text: "积极参与讨论，表达自己的想法", color: "mbti-e" },
                    { value: "I", text: "先倾听他人，在必要时表达自己", color: "mbti-i" }
                ]
            },
            {
                id: 6,
                dimension: "S/N",
                text: "你更擅长记住：",
                options: [
                    { value: "S", text: "具体的细节和事实", color: "mbti-s" },
                    { value: "N", text: "整体的模式和关系", color: "mbti-n" }
                ]
            },
            {
                id: 7,
                dimension: "T/F",
                text: "当朋友遇到问题时，你更可能：",
                options: [
                    { value: "T", text: "提供实际的解决方案", color: "mbti-t" },
                    { value: "F", text: "表达理解和情感支持", color: "mbti-f" }
                ]
            },
            {
                id: 8,
                dimension: "J/P",
                text: "对于最后期限，你通常会：",
                options: [
                    { value: "J", text: "提前完成，避免匆忙", color: "mbti-j" },
                    { value: "P", text: "在截止前集中精力完成", color: "mbti-p" }
                ]
            },
            {
                id: 9,
                dimension: "E/I",
                text: "你更喜欢的休闲方式是：",
                options: [
                    { value: "E", text: "与朋友聚会或参加活动", color: "mbti-e" },
                    { value: "I", text: "独自阅读、思考或做自己喜欢的事", color: "mbti-i" }
                ]
            },
            {
                id: 10,
                dimension: "S/N",
                text: "你对未来的看法更倾向于：",
                options: [
                    { value: "S", text: "基于现有信息做出实际预测", color: "mbti-s" },
                    { value: "N", text: "想象各种可能性和理想状态", color: "mbti-n" }
                ]
            },
            {
                id: 11,
                dimension: "T/F",
                text: "在争论中，你更关注：",
                options: [
                    { value: "T", text: "观点的逻辑性和正确性", color: "mbti-t" },
                    { value: "F", text: "维护关系的和谐与尊重", color: "mbti-f" }
                ]
            },
            {
                id: 12,
                dimension: "J/P",
                text: "对于生活，你更倾向于：",
                options: [
                    { value: "J", text: "有明确的目标和方向", color: "mbti-j" },
                    { value: "P", text: "顺其自然，享受过程", color: "mbti-p" }
                ]
            },
            // 额外题目 13-48
            {
                id: 13,
                dimension: "E/I",
                text: "在会议中，你更倾向于：",
                options: [
                    { value: "E", text: "积极发言，分享想法", color: "mbti-e" },
                    { value: "I", text: "认真倾听，必要时才发言", color: "mbti-i" }
                ]
            },
            {
                id: 14,
                dimension: "S/N",
                text: "你更关注：",
                options: [
                    { value: "S", text: "当前的实际状况", color: "mbti-s" },
                    { value: "N", text: "未来的发展可能", color: "mbti-n" }
                ]
            },
            {
                id: 15,
                dimension: "T/F",
                text: "做决定时，你更依赖：",
                options: [
                    { value: "T", text: "逻辑分析和客观事实", color: "mbti-t" },
                    { value: "F", text: "个人价值观和感受", color: "mbti-f" }
                ]
            },
            {
                id: 16,
                dimension: "J/P",
                text: "你更喜欢：",
                options: [
                    { value: "J", text: "有明确截止日期的任务", color: "mbti-j" },
                    { value: "P", text: "灵活开放的项目", color: "mbti-p" }
                ]
            },
            {
                id: 17,
                dimension: "E/I",
                text: "获得能量时，你更倾向于：",
                options: [
                    { value: "E", text: "与他人互动交流", color: "mbti-e" },
                    { value: "I", text: "独自思考或休息", color: "mbti-i" }
                ]
            },
            {
                id: 18,
                dimension: "S/N",
                text: "学习新技能时，你更注重：",
                options: [
                    { value: "S", text: "掌握具体步骤", color: "mbti-s" },
                    { value: "N", text: "理解基本原理", color: "mbti-n" }
                ]
            },
            {
                id: 19,
                dimension: "T/F",
                text: "处理冲突时，你更关注：",
                options: [
                    { value: "T", text: "问题的解决方案", color: "mbti-t" },
                    { value: "F", text: "各方的感受", color: "mbti-f" }
                ]
            },
            {
                id: 20,
                dimension: "J/P",
                text: "面对变化时，你更可能：",
                options: [
                    { value: "J", text: "制定新的计划", color: "mbti-j" },
                    { value: "P", text: "灵活适应调整", color: "mbti-p" }
                ]
            },
            {
                id: 21,
                dimension: "E/I",
                text: "在团队中，你更可能：",
                options: [
                    { value: "E", text: "主动提出建议", color: "mbti-e" },
                    { value: "I", text: "等待被征求意见", color: "mbti-i" }
                ]
            },
            {
                id: 22,
                dimension: "S/N",
                text: "你更相信：",
                options: [
                    { value: "S", text: "经验是最好的老师", color: "mbti-s" },
                    { value: "N", text: "直觉往往是对的", color: "mbti-n" }
                ]
            },
            {
                id: 23,
                dimension: "T/F",
                text: "评价他人时，你更注重：",
                options: [
                    { value: "T", text: "能力和表现", color: "mbti-t" },
                    { value: "F", text: "人品和态度", color: "mbti-f" }
                ]
            },
            {
                id: 24,
                dimension: "J/P",
                text: "你更享受：",
                options: [
                    { value: "J", text: "完成任务的成就感", color: "mbti-j" },
                    { value: "P", text: "探索过程的乐趣", color: "mbti-p" }
                ]
            },
            {
                id: 25,
                dimension: "E/I",
                text: "面对压力时，你更可能：",
                options: [
                    { value: "E", text: "寻求他人的支持", color: "mbti-e" },
                    { value: "I", text: "独自处理问题", color: "mbti-i" }
                ]
            },
            {
                id: 26,
                dimension: "S/N",
                text: "你更擅长：",
                options: [
                    { value: "S", text: "处理具体细节", color: "mbti-s" },
                    { value: "N", text: "把握整体趋势", color: "mbti-n" }
                ]
            },
            {
                id: 27,
                dimension: "T/F",
                text: "面对批评时，你更可能：",
                options: [
                    { value: "T", text: "理性分析批评内容", color: "mbti-t" },
                    { value: "F", text: "关注批评者的动机", color: "mbti-f" }
                ]
            },
            {
                id: 28,
                dimension: "J/P",
                text: "你更倾向于：",
                options: [
                    { value: "J", text: "提前完成工作", color: "mbti-j" },
                    { value: "P", text: "在截止前完成", color: "mbti-p" }
                ]
            },
            {
                id: 29,
                dimension: "E/I",
                text: "在社交场合，你通常：",
                options: [
                    { value: "E", text: "主动认识新朋友", color: "mbti-e" },
                    { value: "I", text: "与熟悉的人交流", color: "mbti-i" }
                ]
            },
            {
                id: 30,
                dimension: "S/N",
                text: "你更关注信息的：",
                options: [
                    { value: "S", text: "准确性和实用性", color: "mbti-s" },
                    { value: "N", text: "创新性和启发性", color: "mbti-n" }
                ]
            },
            {
                id: 31,
                dimension: "T/F",
                text: "在团队中，你更可能：",
                options: [
                    { value: "T", text: "关注任务完成", color: "mbti-t" },
                    { value: "F", text: "关注团队和谐", color: "mbti-f" }
                ]
            },
            {
                id: 32,
                dimension: "J/P",
                text: "你更喜欢：",
                options: [
                    { value: "J", text: "有明确规则的环境", color: "mbti-j" },
                    { value: "P", text: "灵活自由的环境", color: "mbti-p" }
                ]
            },
            {
                id: 33,
                dimension: "E/I",
                text: "获得灵感时，你更可能：",
                options: [
                    { value: "E", text: "立即与他人分享", color: "mbti-e" },
                    { value: "I", text: "先自己完善想法", color: "mbti-i" }
                ]
            },
            {
                id: 34,
                dimension: "S/N",
                text: "你更相信：",
                options: [
                    { value: "S", text: "眼见为实", color: "mbti-s" },
                    { value: "N", text: "感觉很重要", color: "mbti-n" }
                ]
            },
            {
                id: 35,
                dimension: "T/F",
                text: "面对困难时，你更可能：",
                options: [
                    { value: "T", text: "分析问题找解决方案", color: "mbti-t" },
                    { value: "F", text: "寻求情感支持", color: "mbti-f" }
                ]
            },
            {
                id: 36,
                dimension: "J/P",
                text: "你更倾向于：",
                options: [
                    { value: "J", text: "按计划行事", color: "mbti-j" },
                    { value: "P", text: "随机应变", color: "mbti-p" }
                ]
            },
            {
                id: 37,
                dimension: "E/I",
                text: "在陌生环境中，你更可能：",
                options: [
                    { value: "E", text: "主动探索和尝试", color: "mbti-e" },
                    { value: "I", text: "先观察再行动", color: "mbti-i" }
                ]
            },
            {
                id: 38,
                dimension: "S/N",
                text: "你更擅长：",
                options: [
                    { value: "S", text: "执行具体任务", color: "mbti-s" },
                    { value: "N", text: "发现新的机会", color: "mbti-n" }
                ]
            },
            {
                id: 39,
                dimension: "T/F",
                text: "做决定时，你更关注：",
                options: [
                    { value: "T", text: "长期影响和后果", color: "mbti-t" },
                    { value: "F", text: "对他人的影响", color: "mbti-f" }
                ]
            },
            {
                id: 40,
                dimension: "J/P",
                text: "你更享受：",
                options: [
                    { value: "J", text: "有序和稳定的生活", color: "mbti-j" },
                    { value: "P", text: "充满变化的生活", color: "mbti-p" }
                ]
            },
            {
                id: 41,
                dimension: "E/I",
                text: "面对新挑战时，你更倾向于：",
                options: [
                    { value: "E", text: "寻求他人的建议", color: "mbti-e" },
                    { value: "I", text: "独自思考解决方案", color: "mbti-i" }
                ]
            },
            {
                id: 42,
                dimension: "S/N",
                text: "你更关注：",
                options: [
                    { value: "S", text: "现实和现状", color: "mbti-s" },
                    { value: "N", text: "可能性和潜力", color: "mbti-n" }
                ]
            },
            {
                id: 43,
                dimension: "T/F",
                text: "在评价事物时，你更注重：",
                options: [
                    { value: "T", text: "客观标准和逻辑", color: "mbti-t" },
                    { value: "F", text: "主观感受和价值", color: "mbti-f" }
                ]
            },
            {
                id: 44,
                dimension: "J/P",
                text: "你更倾向于：",
                options: [
                    { value: "J", text: "完成既定目标", color: "mbti-j" },
                    { value: "P", text: "探索新的可能性", color: "mbti-p" }
                ]
            },
            {
                id: 45,
                dimension: "E/I",
                text: "在团队项目中，你更可能：",
                options: [
                    { value: "E", text: "推动讨论和决策", color: "mbti-e" },
                    { value: "I", text: "提供深度思考", color: "mbti-i" }
                ]
            },
            {
                id: 46,
                dimension: "S/N",
                text: "你更相信：",
                options: [
                    { value: "S", text: "实践出真知", color: "mbti-s" },
                    { value: "N", text: "灵感来自内心", color: "mbti-n" }
                ]
            },
            {
                id: 47,
                dimension: "T/F",
                text: "面对冲突时，你更可能：",
                options: [
                    { value: "T", text: "直接面对问题", color: "mbti-t" },
                    { value: "F", text: "寻求和谐解决", color: "mbti-f" }
                ]
            },
            {
                id: 48,
                dimension: "J/P",
                text: "你更享受：",
                options: [
                    { value: "J", text: "达成预定目标", color: "mbti-j" },
                    { value: "P", text: "发现新事物", color: "mbti-p" }
                ]
            }
        ];

        // MBTI类型数据
        const mbtiTypes = {
            INFP: {
                name: "调停者",
                description: "理想主义者，富有洞察力和同情心",
                overview: "INFP类型的人是理想主义者，富有创造力和洞察力。他们重视个人价值和意义，对他人富有同情心和理解力。虽然外表可能显得安静，但内心世界丰富而复杂。他们倾向于追求自己的理想，为自己认为有意义的事业而努力。",
                careers: ["心理咨询师", "作家", "艺术家", "教师", "社会工作者"],
                growth: "作为INFP，你可以尝试在坚持自己理想的同时，更加关注现实世界的需求。学会设定边界，避免过度投入他人的问题而忽视自己的需求。适当走出舒适区，尝试一些结构化的活动，这会帮助你更好地平衡直觉和现实。"
            },
            INTP: {
                name: "逻辑学家",
                description: "理性分析者，追求知识和理解",
                overview: "INTP类型的人是理性的思考者，对知识和理解有着强烈的渴望。他们善于分析复杂的问题，提出创新的解决方案。虽然社交不是他们的强项，但他们在自己感兴趣的领域往往表现出非凡的洞察力和创造力。他们重视逻辑和理性，对抽象概念和理论有着浓厚的兴趣。",
                careers: ["科学家", "程序员", "哲学家", "分析师", "研究员"],
                growth: "作为INTP，你可以尝试更多地关注现实应用，而不仅仅是理论理解。培养实践技能，学会将你的想法付诸实施。在人际关系中，尝试更多地表达自己的情感和想法，这会帮助你建立更深入的连接。"
            },
            ENFP: {
                name: "竞选者",
                description: "热情洋溢，富有创造力和社交能力",
                overview: "ENFP类型的人充满热情和创造力，善于与人交往。他们对新观念和可能性充满好奇，喜欢探索新的想法和体验。他们富有同情心，善于理解他人的观点，能够激励和鼓舞周围的人。他们重视个人价值和意义，倾向于追求能够发挥自己创造力的工作和生活方式。",
                careers: ["顾问", "教练", "公关", "设计师", "创业者"],
                growth: "作为ENFP，你可以尝试培养专注力和执行力，将你的许多想法之一付诸实践。学会设定优先级，避免过度分散精力。在做决定时，除了考虑可能性和热情，也可以适当增加对现实因素的考量。"
            },
            ENTP: {
                name: "辩论家",
                description: "聪明机智，善于辩论和创新",
                overview: "ENTP类型的人聪明机智，善于辩论和挑战传统观念。他们富有创造力和洞察力，能够看到问题的多个方面。他们喜欢智力挑战，善于提出创新的解决方案。他们外向、自信，善于与人交往，但也可能因为喜欢辩论而无意中冒犯他人。他们重视智力刺激和自由思考。",
                careers: ["律师", "企业家", "营销策划", "发明家", "战略顾问"],
                growth: "作为ENTP，你可以尝试更多地关注细节和实施，而不仅仅是产生想法。学会倾听他人的观点，即使你不同意，也可以表现出更多的尊重。培养耐心，理解有些事情需要时间才能看到结果。"
            },
            // 其他MBTI类型数据省略
        };

        // 存储用户答案和得分
        const userAnswers = {};
        const mbtiScores = {
            E: 0, I: 0,
            S: 0, N: 0,
            T: 0, F: 0,
            J: 0, P: 0
        };
        let currentQuestionIndex = 0;

        // DOM元素
        const testIntro = document.getElementById('test-intro');
        const testQuestionsEl = document.getElementById('test-questions');
        const testResult = document.getElementById('test-result');
        const startTestBtn = document.getElementById('start-test');
        const prevQuestionBtn = document.getElementById('prev-question');
        const nextQuestionBtn = document.getElementById('next-question');
        const retakeTestBtn = document.getElementById('retake-test');
        const backButton = document.getElementById('back-button');
        const questionContainer = document.getElementById('question-container');
        const currentQuestionEl = document.getElementById('current-question');
        const progressBarEl = document.getElementById('progress-bar');
        const progressPercentEl = document.getElementById('progress-percent');
        const dimensionIndicator = document.getElementById('dimension-indicator');

        // 开始测试按钮点击事件
        startTestBtn.addEventListener('click', () => {
            testIntro.classList.add('hidden');
            testQuestionsEl.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            window.scrollTo(0, 0);
        });

        // 上一题按钮点击事件
        prevQuestionBtn.addEventListener('click', () => {
            if (currentQuestionIndex > 0) {
                // 减去当前题目的得分
                const currentQuestion = testQuestions[currentQuestionIndex];
                if (userAnswers[currentQuestion.id]) {
                    mbtiScores[userAnswers[currentQuestion.id]]--;
                }
                
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            }
        });

        // 下一题按钮点击事件
        nextQuestionBtn.addEventListener('click', () => {
            // 获取当前选中的选项
            const selectedOption = document.querySelector('.question-option.selected');
            
            if (!selectedOption) {
                alert('请选择一个选项后再继续');
                return;
            }
            
            // 保存答案并更新得分
            const currentQuestion = testQuestions[currentQuestionIndex];
            const selectedValue = selectedOption.getAttribute('data-value');
            userAnswers[currentQuestion.id] = selectedValue;
            mbtiScores[selectedValue]++;
            
            if (currentQuestionIndex < testQuestions.length - 1) {
                currentQuestionIndex++;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            } else {
                // 完成测试，计算并显示结果
                calculateResult();
                showResultModal();
            }
        });

        // 重新测试按钮点击事件
        retakeTestBtn.addEventListener('click', () => {
            // 重置测试状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            Object.keys(mbtiScores).forEach(key => mbtiScores[key] = 0);
            
            // 切换到题目页面
            testResult.classList.add('hidden');
            testQuestionsEl.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            updateNavigationButtons();
            updateProgress();
            window.scrollTo(0, 0);
        });

        // 返回按钮点击事件
        backButton.addEventListener('click', () => {
            // 返回测试列表页
            if (testQuestionsEl.classList.contains('hidden') && testResult.classList.contains('hidden')) {
                window.location.href = 'index.html#test-tab';
            } else {
                // 从测试中返回介绍页
                // 重置当前题目的得分
                const currentQuestion = testQuestions[currentQuestionIndex];
                if (userAnswers[currentQuestion.id]) {
                    mbtiScores[userAnswers[currentQuestion.id]]--;
                    delete userAnswers[currentQuestion.id];
                }
                
                currentQuestionIndex = 0;
                testQuestionsEl.classList.add('hidden');
                testResult.classList.add('hidden');
                testIntro.classList.remove('hidden');
                window.scrollTo(0, 0);
            }
        });

        // 渲染题目
        function renderQuestion(index) {
            const question = testQuestions[index];
            
            // 更新维度指示器
            dimensionIndicator.innerHTML = `<span class="font-bold text-${question.options[0].color} text-sm">${question.dimension}</span>`;
            
            // 更新题目文本
            document.getElementById('question-text').textContent = question.text;
            
            // 清空选项容器并添加新选项
            const optionsContainer = questionContainer.querySelector('.space-y-3');
            optionsContainer.innerHTML = '';
            
            // 创建选项
            question.options.forEach(option => {
                const optionDiv = document.createElement('div');
                optionDiv.className = `question-option scale-hover ${userAnswers[question.id] === option.value ? 'selected' : ''}`;
                optionDiv.setAttribute('data-value', option.value);
                
                const optionContent = document.createElement('div');
                optionContent.className = `p-4 bg-white rounded-lg border ${userAnswers[question.id] === option.value ? `border-${option.color}` : 'border-gray-200'} hover:border-${option.color} cursor-pointer`;
                
                const optionText = document.createElement('div');
                optionText.className = 'flex justify-between items-center';
                optionText.innerHTML = `
                    <span>${option.text}</span>
                    <span class="px-2 py-1 bg-${option.color}/10 text-${option.color} rounded text-xs font-medium">${option.value}</span>
                `;
                
                optionContent.appendChild(optionText);
                optionDiv.appendChild(optionContent);
                optionsContainer.appendChild(optionDiv);
                
                // 添加选项点击事件
                optionDiv.addEventListener('click', () => {
                    // 移除其他选项的选中状态
                    document.querySelectorAll('.question-option').forEach(el => {
                        el.classList.remove('selected');
                        el.querySelector('div').className = `p-4 bg-white rounded-lg border border-gray-200 hover:border-${option.color} cursor-pointer`;
                    });
                    
                    // 设置当前选项为选中状态
                    optionDiv.classList.add('selected');
                    optionContent.className = `p-4 bg-white rounded-lg border border-${option.color} hover:border-${option.color} cursor-pointer`;
                });
            });
            
            // 添加动画
            questionContainer.classList.add('slide-in');
            setTimeout(() => {
                questionContainer.classList.remove('slide-in');
            }, 300);
        }

        // 更新导航按钮状态
        function updateNavigationButtons() {
            // 更新上一题按钮
            prevQuestionBtn.disabled = currentQuestionIndex === 0;
            
            // 更新下一题按钮文本
            if (currentQuestionIndex === testQuestions.length - 1) {
                nextQuestionBtn.textContent = '查看结果';
            } else {
                nextQuestionBtn.textContent = '下一题';
            }
        }

        // 更新进度条
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / testQuestions.length) * 100;
            progressBarEl.style.width = `${progress}%`;
            currentQuestionEl.textContent = currentQuestionIndex + 1;
            progressPercentEl.textContent = `${Math.round(progress)}%`;
        }

        // 计算测试结果
        function calculateResult() {
            // 确定每个维度的偏好
            const mbtiType = 
                (mbtiScores.E >= mbtiScores.I ? 'E' : 'I') +
                (mbtiScores.S >= mbtiScores.N ? 'S' : 'N') +
                (mbtiScores.T >= mbtiScores.F ? 'T' : 'F') +
                (mbtiScores.J >= mbtiScores.P ? 'J' : 'P');
            
            // 获取该类型的详细信息（如果没有则使用默认）
            const typeInfo = mbtiTypes[mbtiType] || mbtiTypes.INFP;
            
            // 计算维度百分比
            const dimensionPercentages = {
                EI: mbtiScores.I > mbtiScores.E ? Math.round(mbtiScores.I / (mbtiScores.I + mbtiScores.E) * 100) : Math.round(100 - (mbtiScores.E / (mbtiScores.I + mbtiScores.E) * 100)),
                SN: mbtiScores.N > mbtiScores.S ? Math.round(mbtiScores.N / (mbtiScores.N + mbtiScores.S) * 100) : Math.round(100 - (mbtiScores.S / (mbtiScores.N + mbtiScores.S) * 100)),
                TF: mbtiScores.F > mbtiScores.T ? Math.round(mbtiScores.F / (mbtiScores.F + mbtiScores.T) * 100) : Math.round(100 - (mbtiScores.T / (mbtiScores.F + mbtiScores.T) * 100)),
                JP: mbtiScores.P > mbtiScores.J ? Math.round(mbtiScores.P / (mbtiScores.P + mbtiScores.J) * 100) : Math.round(100 - (mbtiScores.J / (mbtiScores.P + mbtiScores.J) * 100))
            };
            
            return {
                type: mbtiType,
                typeInfo: typeInfo,
                dimensionPercentages: dimensionPercentages
            };
        }

        // 显示结果弹框
        function showResultModal() {
            const result = calculateResult();
            const modal = document.getElementById('result-modal');
            const resultContent = document.getElementById('result-content');
            
            // 生成结果内容
            resultContent.innerHTML = generateQuickResultContent(result);
            
            // 显示弹框
            modal.classList.remove('hidden');
            
            // 添加动画效果
            setTimeout(() => {
                const modalContent = modal.querySelector('.absolute');
                modalContent.classList.remove('translate-y-full');
            }, 10);
        }

        // 生成快速测试结果内容
        function generateQuickResultContent(result) {
            const { type, typeInfo, dimensionPercentages } = result;
            
            return `
                <div class="text-center mb-6">
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center mx-auto mb-4 shadow-lg">
                        <span class="text-2xl font-bold text-primary">${type}</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">${typeInfo.name}</h2>
                    <p class="text-sm text-gray-500">${typeInfo.description}</p>
                </div>
                
                <!-- 维度分布 -->
                <div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-4 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">你的MBTI维度分布</h3>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between text-xs mb-1">
                                <span class="text-mbti-i">内向(I)</span>
                                <span class="text-mbti-e">外向(E)</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-mbti-i h-2 rounded-full" style="width: ${dimensionPercentages.EI}%"></div>
                            </div>
                            <div class="text-right text-xs text-gray-500 mt-1">${dimensionPercentages.EI}%</div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between text-xs mb-1">
                                <span class="text-mbti-s">感觉(S)</span>
                                <span class="text-mbti-n">直觉(N)</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-mbti-n h-2 rounded-full" style="width: ${dimensionPercentages.SN}%"></div>
                            </div>
                            <div class="text-right text-xs text-gray-500 mt-1">${dimensionPercentages.SN}%</div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between text-xs mb-1">
                                <span class="text-mbti-t">思考(T)</span>
                                <span class="text-mbti-f">情感(F)</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-mbti-f h-2 rounded-full" style="width: ${dimensionPercentages.TF}%"></div>
                            </div>
                            <div class="text-right text-xs text-gray-500 mt-1">${dimensionPercentages.TF}%</div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between text-xs mb-1">
                                <span class="text-mbti-j">判断(J)</span>
                                <span class="text-mbti-p">知觉(P)</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-mbti-p h-2 rounded-full" style="width: ${dimensionPercentages.JP}%"></div>
                            </div>
                            <div class="text-right text-xs text-gray-500 mt-1">${dimensionPercentages.JP}%</div>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">类型概述</h3>
                        <p class="text-sm text-gray-600">${typeInfo.overview}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">适合职业</h3>
                        <div class="flex flex-wrap gap-2">
                            ${typeInfo.careers.map(career => `
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">${career}</span>
                            `).join('')}
                        </div>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">成长建议</h3>
                        <p class="text-sm text-gray-600">${typeInfo.growth}</p>
                    </div>
                </div>
            `;
        }

        // 初始化结果弹框事件
        function initResultModal() {
            const modal = document.getElementById('result-modal');
            const closeButton = document.getElementById('close-result-modal');
            const retakeButton = document.getElementById('retake-test');
            const backToHomeButton = document.getElementById('back-to-home');
            
            // 关闭弹框
            closeButton.addEventListener('click', closeResultModal);
            
            // 点击背景关闭弹框
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeResultModal();
                }
            });
            
            // 重新测试
            retakeButton.addEventListener('click', () => {
                closeResultModal();
                resetQuickTest();
            });
            
            // 返回首页
            backToHomeButton.addEventListener('click', () => {
                window.location.href = 'index.html';
            });
        }

        // 关闭结果弹框
        function closeResultModal() {
            const modal = document.getElementById('result-modal');
            const modalContent = modal.querySelector('.absolute');
            
            // 添加关闭动画
            modalContent.classList.add('translate-y-full');
            
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }

        // 重置快速测试
        function resetQuickTest() {
            // 重置所有状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            Object.keys(mbtiScores).forEach(key => mbtiScores[key] = 0);
            
            // 隐藏测试相关元素
            testQuestionsEl.classList.add('hidden');
            testResult.classList.add('hidden');
            
            // 显示测试介绍
            testIntro.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 为返回按钮添加点击事件
        document.getElementById('back-button').addEventListener('click', function() {
            window.location.href = 'index.html';
        });

        // 为Tab按钮添加点击事件
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('tab-active'));
                // 添加当前活跃状态
                this.classList.add('tab-active');
                
                // 在实际应用中，这里应该跳转到相应的页面
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') {
                    window.location.href = `index.html#${tabId}`;
                }
            });
        });

        // 初始化弹框事件
        document.addEventListener('DOMContentLoaded', initResultModal);
    </script>
</body>
</html>
